<template>
  <div>
    <el-select
      v-model="feeItem"
      multiple
      collapse-tags
      placeholder="请选择"
      clearable
      @change="refresh"
      @clear="refresh"
      @remove-tag="refresh"
      size="small"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <v-chart :options="orgOption" autoresize />
  </div>
</template>

<script>
export default {
  name: "FeeItemGrid",
  data() {
    return {
      data: [
        {
          id: 1,
          name: "车位费",
          from: "#248ff7",
          to: "#6851f1",
          data: [400, 600, 700, 700, 1000, 400, 400, 600, 700, 700, 1000, 400]
        },
        {
          id: 2,
          name: "分摊费",
          from: "#8bd46e",
          to: "#09bcb7",
          data: [400, 600, 700, 700, 1000, 400, 400, 600, 700, 700, 1000, 400]
        },
        {
          id: 3,
          name: "物业费",
          from: "#fccb05",
          to: "#f5804d",
          data: [200, 200, 200, 50, 100, 300, 300, 600, 700, 700, 1000, 400]
        }
      ],
      options: [
        {
          value: 1,
          label: "车位费"
        },
        {
          value: 2,
          label: "分摊费"
        },
        {
          value: 3,
          label: "物业费"
        }
      ],
      feeItem: [],
      colorMap: {
        1: {
          from: "#248ff7",
          to: "#6851f1"
        },
        2: {
          from: "#8bd46e",
          to: "#09bcb7"
        },
        3: {
          from: "#fccb05",
          to: "#f5804d"
        }
      },
      category: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ]
    };
  },
  computed: {
    orgOption() {
      return this.initData();
    },
    timeType() {
      return this.$store.timeType;
    }
  },
  watch: {
    timeType(before, after) {
      window.console.log("before:" + before);
      window.console.log("after:" + after);
    }
  },
  methods: {
    initData() {
      let series = [];
      let max = 0;
      let legend = [];
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: "rgba(255,255,255,0.1)"
        },
        grid: {
          left: "2%",
          bottom: "0",
          containLabel: true
        },
        legend: {
          data: ["车位费", "分摊费", "物业费"],
          right: "5%",
          top: "5%",
          textStyle: {
            color: "#fff"
          },
          itemWidth: 20,
          itemHeight: 15
        },
        xAxis: {
          type: "category",
          data: this.category,
          axisLine: {
            lineStyle: {
              color: "white"
            }
          },
          axisLabel: {
            textStyle: {
              fontFamily: "Microsoft YaHei"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)"
            }
          },
          axisLabel: {}
        },
        dataZoom: [
          {
            type: "inside"
          }
        ]
      };

      let echart = this.$echarts;

      this.data.forEach(function(value) {
        legend.push(value.name);

        max = Math.max(max, ...value.data);

        series.push({
          name: value.name,
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: value.from
                },
                {
                  offset: 1,
                  color: value.to
                }
              ]),
              barBorderRadius: 11
            }
          },
          data: value.data
        });
      });

      option.series = series;
      option.yAxis.max = max;
      option.legend.data = legend;

      return option;
    },
    refresh() {
      let data = [
        {
          id: 1,
          name: "车位费",
          from: "#248ff7",
          to: "#6851f1",
          data: [400, 600, 700, 700, 1000, 400, 400, 600, 700, 700, 1000, 400]
        },
        {
          id: 2,
          name: "分摊费",
          from: "#8bd46e",
          to: "#09bcb7",
          data: [400, 600, 700, 700, 1000, 400, 400, 600, 700, 700, 1000, 400]
        },
        {
          id: 3,
          name: "物业费",
          from: "#fccb05",
          to: "#f5804d",
          data: [200, 200, 200, 50, 100, 300, 300, 600, 700, 700, 1000, 400]
        }
      ];

      if (this.feeItem.length !== 0) {
        data = data.filter(data =>
          this.feeItem.find(feeItem => feeItem === data.id)
        );
      }

      this.data = data;
      this.initData();
    }
  },
  mounted() {
    this.refresh();
  }
};
</script>

<style scoped>
.echarts {
  height: 25vh !important;
}

span {
  color: aqua;
}
</style>
